/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

// 1. 小程序使用线上地址,文件存储在[开发者工具可打开]云开发,云存储 /bg
// 2. h5使用本地地址,方便调试
//$bgPath: "https://612d-a-2g32pg8o441b3e36-1312530209.tcb.qcloud.la/bg";
$bgPath: "https://static-05a9021a-1ee8-489d-8184-83da528d0ab9.bspapp.com/bg-shui";
//$bgPath: '/static/bg';

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color: #333; //基本色
$uni-text-color-inverse: #fff; //反色
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;

/* 背景颜色 */
$color-white: #007aff;
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

/* 边框颜色 */
$uni-border-color: #c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16;
$font-sm: 24upx;
$font-base: 28upx;
$font-lg: 32upx;

/* 图片尺寸 */
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 26px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;

view {
	box-sizing: border-box;
}

.flex {
	display: flex;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
.flex-center {
	align-items: center;
	justify-content: center;
}
.flex-sb {
	align-items: center;
	justify-content: space-between;
}


// view内部使用image组件,控制image样式不超出
.imageInnerStyle {
	width: 100%;
	height: 100%;
}

// 页面底部按钮
.pageBtnBottomWrapPre {
	padding-bottom: 120px !important;
}

.pageBtnBottomWrapPreWithBottomMenu {
	padding-bottom: 200px !important;
}

.pageBtnBottomWrap {
	position: fixed;
	padding: 20px;
	bottom: 0;
	left: 0;
	width: 100%;
	.pageBtnBottom {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #177fff;
		border-radius: 8px;

		font-size: 36px;
		font-weight: 400;
		color: #ffffff;

		padding: 16px;
	}
	.pageBtnBottomList {
		display: flex;
		justify-content: center;
		align-items: center;
		.pageBtnBottomLi {
			margin: 0 10px;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			//background: linear-gradient(90deg, #4FE490 0%, #3FB270 100%);
			border-radius: 8px;

			font-size: 36px;
			font-weight: 400;

			padding: 16px;
		}
		.pageBtnBottomLiNormal {
			color: black;
			background: #ffffff;
			border: 2px solid #e6e9eb;
		}
	}
	.pageBtnBottomListColumn {
		flex-flow: column;
	}
}

.pageBtnBottomWrapWithBottomMenu {
	padding-bottom: 140px;
}

.modalCenter {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 4;
	//background: rgba(65, 65, 65, 0.65);
	animation: bgChange 500ms ease-out both;

	display: flex;
	justify-content: center;
	align-items: center;

	.inner {
		width: 88%;
		background: #f7f7f7;

		flex-flow: column;

		border-radius: 20px;
		overflow: hidden;
		.innerHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 30px;
			border-bottom: 1px solid rgba(128, 128, 128, 0.2);
			.title {
				font-weight: bolder;
				font-size: 28px;
			}
			.closeBtn {
				width: 60px;
				height: 60px;

				cursor: pointer;

				background-image: url(#{$bgPath}/icon-close.png);
				background-size: 50% 50%;
				background-repeat: no-repeat;
				background-position: center center;
			}
		}
		.innerBody {
			padding: 20px;
			flex-flow: column;
			overflow: auto;
		}
		.innerFooter {
			width: 100%;
			border-top: 1px solid rgba(128, 128, 128, 0.2);
			display: flex;
			.btnBasic {
				cursor: pointer;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20px 0;
				font-size: 24px;
			}
			.btnConfirm {
				color: lightseagreen;
			}
			.btnCancel {
				color: lightslategray;
			}
		}
	}
}

.popInner {
	width: 654px;
	background: #ffffff;
	border-radius: 16px;
	padding: 32px;
	.popHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.popHeaderLeft {
			width: 32px;
			height: 32px;
		}
		.popHeaderCenter {
			font-size: 32px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.79);
			line-height: 44px;
		}
		.popHeaderRight {
			width: 32px;
			height: 32px;
		}
		.popHeaderRightClose {
			background-image: url(#{$bgPath}/icon_close_black.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
	}
	.popContent {
		padding: 20px 0;
	}
	.popFooter {
		.popFooterBtn {
			margin-top: 50px;
			width: 100%;
			height: 80px;
			background: linear-gradient(90deg, #4fe490 0%, #3fb270 100%);
			border-radius: 40px;

			display: flex;
			justify-content: center;
			align-items: center;

			font-size: 36px;
			color: #ffffff;
			line-height: 44px;
		}
	}
}

// 将原生按钮的样式去除
.buttonStyleNone {
	background-color: transparent;
	border: none;
	padding: 0;
}

.buttonStyleNone::after {
	border: none;
}

.container {
	font-size: 28px;
	line-height: 1.5;
	padding-bottom: 28 * 2px;
}

.g-selectInner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.selectInnerText {
		font-size: 28px;
		font-weight: 500;
		color: #243d4e;
	}
	.selectInnerIconRight {
		width: 40px;
		height: 40px;
		background-image: url(#{$bgPath}/icon_direct_down_grey.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
}

.g-page-header-wrap {
	.g-page-header-pre {
		height: 130px;
	}
	.g-page-header {
		z-index: 1;
		position: fixed;
		top: 0;
		height: 130px;
		width: 100%;
		padding: 40px 0 0 0;
		display: flex;
		align-items: center;
		background-color: white;
		.g-page-header-title {
			font-size: 36px;
			color: black;
		}
		.g-page-header-btn {
			width: 80px;
			height: 80px;
		}
		.g-page-header-back {
			background-image: url(#{$bgPath}/icon_direct_left_black.png);
			background-repeat: no-repeat;
			background-size: 50% 50%;
			background-position: center center;
		}
	}
}

.g-page-header-wrap-white {
	.g-page-header {
		background-color: transparent;
		.g-page-header-title {
			color: white;
		}
		.g-page-header-back {
			background-image: url(#{$bgPath}/icon_direct_left_right.png);
		}
	}
}

.tabListWrap {
	width: 100%;
	overflow: auto;
	background: #ffffff;
	.tabList {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30px;
		.tabLi {
			margin: 0 30px;
			white-space: nowrap;
			padding: 20px 0;
			border-bottom: 4px solid transparent;
			color: #556675;
		}
		.tabLiActive {
			border-bottom: 4px solid #177FFF;
			color: #177FFF;
		}
	}
}


.pickerInner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
	.pickerInnerIcon {
		margin-left: 5px;
		width: 30px;
		height: 30px;

		background-image: url(#{$bgPath}/icon_right_grey.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
	.pickerInnerIconDate {
		margin-right: 10px;
		width: 30px;
		height: 30px;

		background-image: url(#{$bgPath}/icon_date.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
	.pickerInnerText {
		white-space: nowrap;
	}
}
.tabListWrapSimple {
	width: 100%;
	overflow: auto;
	.tabList {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tabLi {
			margin: 0 20px;
			white-space: nowrap;
			padding: 10px 0;
			border-bottom: 4px solid transparent;
			color: #556675;
		}
		.tabLiActive {
			color: #177FFF;
		}
	}
}

::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}

::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background-color: transparent;
}

::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	//box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: transparent;
	border-radius: 10px;
}

.listPlaceholder {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	padding: 50px 0;
	.listPlaceholderImage {
		width: 500px;
		height: 320px;

		background-image: url(#{$bgPath}/bg_placeholder.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}
	.listPlaceholderText1 {
		font-size: 32px;
		font-weight: 400;
		color: #253a4e;
		line-height: 44px;
		margin-top: 30px;
	}
	.listPlaceholderText2 {
		font-size: 26px;
		font-weight: 400;
		color: #9ea8b1;
		line-height: 36px;
		margin-top: 20px;
	}
}

.richText {
	.rich-img {
		width: 100%;
		height: auto;
	}
}

// 暂时隐藏
.hide_hide {
	display: none !important;
}




.g_tabList {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;

	background: #ffffff;

	.tabLi {
		padding: 20px 0;
		border-bottom: 4px solid transparent;
		color: #556675;
	}
	.tabLiActive {
		border-bottom: 4px solid #177FFF;
		color: #177FFF;
	}
}

// 弹窗
.popInner {
	width: 654px;
	background: #ffffff;
	border-radius: 16px;
	padding: 32px;
	.popHeader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.popLeft {
			width: 32px;
			height: 32px;
		}
		.popCenter {
			font-size: 32px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.79);
			line-height: 44px;
		}
		.popRight {
			width: 32px;
			height: 32px;

			background-image: url(#{$bgPath}/icon_close_grey.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
	}

	.popContent {
	}
	.popFooter {
	}

	.popContentInner {
		display: flex;
		justify-content: center;
		flex-flow: column;
		align-items: center;
		.popInnerIcon {
			margin-top: 100px;
			width: 202px;
			height: 192px;

			background-image: url(#{$bgPath}/icon_success_1.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
		// 沙漏
		.popInnerIconCountdown {
			background-image: url(#{$bgPath}/icon_countdown.png);
		}
		.popInnerText {
			font-size: 28px;
			font-weight: 400;
			color: #6e7c89;
			line-height: 40px;
			text-align: center;
			margin-top: 100px;
		}
		.popInnerButton {
			margin-top: 50px;
			width: 100%;
			height: 80px;
			background: linear-gradient(90deg, #4fe490 0%, #3fb270 100%);
			border-radius: 40px;

			display: flex;
			justify-content: center;
			align-items: center;

			font-size: 36px;
			color: #ffffff;
			line-height: 44px;
		}
	}
}

// 页面头部的切换门店
.switchWrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
	padding-top: 100px;

	&.switchWrapWhite {
		.switchCurrent {
			color: white;
		}
		.switchInner {
			border: 1px solid white;
			.switchWrapIcon {
				background-image: url(#{$bgPath}/icon_direct_down_white.png);
			}
			.switchWrapText {
				color: white;
			}
		}
	}
	.switchCurrent {
		font-weight: bolder;
	}
	.switchRight {
		width: 180px;
	}
	.switchInner {
		display: inline-flex;
		justify-content: center;
		align-items: center;

		border: 1px solid black;
		border-radius: 20px;
		overflow: hidden;
		padding: 8px 24px;

		.switchWrapIcon {
			margin-left: 5px;
			width: 30px;
			height: 30px;

			background-image: url(#{$bgPath}/icon_home_search_2.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
		.switchWrapText {
			white-space: nowrap;
			color: black;
			font-size: 24px;
		}
	}
}


// 方案1 不固定
// 使用方式:
//  @include themeLight {
//    background: white;
//  }
// 顶层控制
@mixin themeLight {
	.light & {
		@content;
	}
}

@mixin themeDark {
	.dark & {
		@content;
	}
}

//原文链接：https://blog.csdn.net/jijunqing321/article/details/117435173
// 方案2 固定的
// 使用方式
// @include base-background();
// 默认主题的变量集合
$default-theme: (
				bg-color: rgb(22, 194, 194),
	// 背景色 text-color: rgb(22, 194, 194),
	// 字体颜色
);
// 白天主题的变量集合
$day-theme: (
				bg-color: rgb(145, 96, 255),
	// 背景色 text-color: rgb(145, 96, 255),
	// 字体颜色
);
// 夜晚主题的变量集合
$night-theme: (
				bg-color: rgb(24, 94, 255),
	// 背景色 text-color: rgb(24, 94, 255),
	// 字体颜色
);
//定义主题对象
$themes: (
	// key为主题  value为主题的变量集合

				default-theme: $default-theme,
				day-theme: $day-theme,
				night-theme: $night-theme
);

// 生成主题背景色样式
@mixin base-background() {
	@each $themename, $theme in $themes {
		&.#{$themename} {
			background-color: map-get($map: $theme, $key: bg-color) !important;
		}
	}
}

// 生成主题字体色样式
@mixin text-color() {
	@each $themename, $theme in $themes {
		&.#{$themename} {
			color: map-get($map: $theme, $key: text-color) !important;
		}
	}
}

@keyframes bgChange {
	0% {
		background: rgba(0, 0, 0, 0.3);
	}
	100% {
		background: rgba(0, 0, 0, 0.7);
	}
}
